import React,{useState,useEffect} from 'react'
import "./Tabbar.less"
import Box from '@mui/material/Box';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import RestoreIcon from '@mui/icons-material/Restore';
import FavoriteIcon from '@mui/icons-material/Favorite';
import LocationOnIcon from '@mui/icons-material/LocationOn';
// 引入图片
import home1 from "@/static/images/tabbar/home_1.png"//彩色
import home2 from "@/static/images/tabbar/home_2.png"//灰色
import fast from "@/static/images/tabbar/fast.png"//彩色
import my1 from "@/static/images/tabbar/my_1.png"//彩色
import my2 from "@/static/images/tabbar/my_2.png"//灰色
import {useNavigate,useLocation} from "react-router-dom"
export default function Tabbar() {
  let [value,setValue] = useState(0)
  let navigate = useNavigate()
  let location = useLocation()
  const routes =["/home","/fast","/user"]
  // 刷新后页面tabbar默认回到第一个问题
  useEffect(()=>{
    console.log(location.pathname);
      setValue(routes.indexOf(location.pathname))
   
  },[location.pathname])
  return (
    <div className='tabbar' style={{display:value === -1?"none":"block"}}>
      <BottomNavigation
        showLabels
        value={value}
        onChange={(event, newValue:number) => {
          // setValue(newValue);
          // 跳转
            navigate(routes[newValue])
        }}
      > 
        <BottomNavigationAction label="首页" icon={<img src={value===0?home1:home2} />} />
        <BottomNavigationAction label="快速刷题" icon={<img src={fast} />} />
        <BottomNavigationAction label="我的" icon={<img src={value===2?my1:my2} />} />
      </BottomNavigation>
    </div>
  )
}
